<template>
  <div class="dialog">
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.show"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :modal-append-to-body="false"
    >
      <div class="form">
        <el-form
          :model="formData"
          :rules="form_rules"
          label-width="120px"
          ref="form"
          style="margin: 10px; width: auto"
        >
          <el-form-item label="收支类型">
            <el-select v-model="formData.type" placeholder="请选择类型">
              <el-option
                v-for="(formtype, index) in format_type_list"
                :key="index"
                :label="formtype"
                :value="formtype"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="收支描述：" prop="describe">
            <el-input
              type="describe"
              v-model="formData.describe"
              placeholder="请输入描述"
            ></el-input>
          </el-form-item>
          <el-form-item label="收入：" prop="income">
            <el-input type="income" v-model.number="formData.income"></el-input>
          </el-form-item>
          <el-form-item label="支出" prop="expend">
            <el-input type="expend" v-model.number="formData.expend"></el-input>
          </el-form-item>
          <el-form-item label="账户现金：" prop="cash">
            <el-input type="cash" v-model.number="formData.cash"></el-input>
          </el-form-item>

          <el-form-item label="备注：">
            <el-input type="textarea" v-model="formData.remark"></el-input>
          </el-form-item>
          <el-form-item class="text_right">
            <el-button @click="dialog.show = false">取消</el-button>

            <el-button type="primary" @click="submitForm('form')"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'diaLog',
  props: {
    dialog: Object,
    formData: Object
  },

  data () {
    return {

      format_type_list: ["提现", "提现手续费", "充值", "优惠券", "充值礼券", "转账"],
      form_rules: {
        type: [{ required: true, message: '请选择收支类型', trigger: 'blur' }],
        describe: [{ required: true, message: '收支描述不能为空', trigger: 'blur' }],
        income: [{ required: true, message: '收入不能为空', trigger: 'blur' }],
        expend: [{ required: true, message: '收出不能为空', trigger: 'blur' }],
        cash: [{ required: true, message: '账户不能为空', trigger: 'blur' }],
      }
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(this.formData.id)
          const url = this.dialog.option == 'add' ? 'add' : `edit/${this.formData.id}`
          this.$axios.post(`/api/profiles/${url}`, this.formData)
            .then(res => {
              //添加成功
              this.$message.success('添加成功', res)
              //隐藏dialog
              this.dialog.show = false

              this.$emit('update')
            })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
}
</script>

<style scoped>
.text_right{
  text-align: right;
}
</style>